<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" />


</head>

<body>

    <body>
        <div id="J_prismPlayer"></div>
    </body>


    <script charset="utf-8" type="text/javascript"
        src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-min.js"></script>
    <!-- <script type="text/javascript" charset="utf-8" src="/aliplayercomponents-1.0.9.min.js"></script> -->
    <script type="text/javascript" charset="utf-8" src="aliplayercomponents-1.0.9.min.js"></script>
    <script>
        var danmukuList = [{
            "mode": 1,            // mode 表示弹幕的类型，参考 弹幕类型 https://github.com/jabbany/CommentCoreLibrary/blob/master/docs/CommentTypes.md
            "text": "test",       // text 表示弹幕的文字内容。注意：在创造弹幕对象后，对 text 的更改将无意义。
            "stime": 1000,        // stime 表示弹幕相对于视频位置的开始时间（ms），0即在视频开始立即出现
            "size": 25,           // 弹幕的文字大小
            "color": 0xffffff     // 文字颜色
        }]
        var player = new Aliplayer({
            id: 'J_prismPlayer',
            source: 'https://outin-6fcf4ee5251211eebba100163e1a625e.oss-cn-shanghai.aliyuncs.com/fd255110251b71ee93d05107e0c90102/b5393b54eb6d4cebb020479c68d034b9-6854e40af7f79359db43bff40436e7c5-fd.mp4?Expires=1689676949&OSSAccessKeyId=LTAIxSaOfEzCnBOj&Signature=vJO8ShMbJr3WQPBOR55aEQys8Ak%3D',//播放地址，可以是第三方点播地址，或阿里云点播服务中的播放地址。

            // vid: '<your video ID>',//必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
            // playauth: 'fd2551102',//必选参数。音视频播放凭证。

            components: [{
                name: 'BulletScreenComponent',
                type: AliPlayerComponent.BulletScreenComponent,
                args: ['测试 Welcome to use Aliplayer', { fontSize: '16px', color: '#00c1de' }, 'random']
            }, {
                name: 'AliplayerDanmuComponent',
                type: AliPlayerComponent.AliplayerDanmuComponent,
                args: [danmukuList]
            }]
        }, function (player) {
            console.log('The player is created.')
        });
    </script>
</body>

</html>